<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./JS/form-serialize.js"></script>
    <script src="./JS/jQuery.min.js"></script>
</head>

<body>
    <form action="javascript:;" class="formAdd">
        <input type="text" name="user_name">
        <input type="password" name="password">
        <button type="submit" id="btn">提交</button>
    </form>

    <script>
        $(function () {
            $('#btn').on('click', function () {
                // 获取表单里面所有的值 查询字符串
                const data = $('form').serialize()
                console.log(data);
                // decodeURIComponent 函数解码
                console.log(decodeURIComponent(data));

                console.log('------------------------');

                // serializeArray()函数获取表单数据数组
                // [{name: '', value: ''}]
                const value = $('form').serializeArray()
                console.log(value);
                let dataa = {}
                // 使用each()函数遍历数组，将数据存储到一个对象中
                $.each(value, (index, item) => {
                    console.log(index)
                    console.log(item)
                    dataa[item.name] = item.value;
                });
                // JSON对象
                console.log(dataa);
                // 对象解构
                const {user_name, password} =dataa
                console.log(user_name, password);



                // 使用JSON.stringify()函数将对象转换为JSON格式的字符串
                const json = JSON.stringify(dataa);
                console.log(json);
            })
        })


        // // 将一个查询字符串转换为对象
        // let str = 'a=23hidsl人f&b=20'
        // function changeobj(str) {
        //     let obj = {}
        //     //遍历字符串，将其按照&符号进行裁剪        
        //     str.split('&').forEach(item => {
        //         let aa = item.split('=')
        //         obj[aa[0]] = aa[1]
        //     });
        //     //遍历将裁剪后的字符串，再按照=号进行裁剪，    //将其赋值给对象  
        //     return obj
        // }
        // console.log(changeobj(str))
        // console.log(changeobj(str[0]))// undefined


        // 获取表单里面所有的值 serialize(form, { hash: true, empty: true})
        // const btn = document.querySelector('#btn')
        // btn.addEventListener('click', () => {
        //     const form = document.querySelector('form')
        //     // hash 设置获取数据表单结构
        //     //  如果为 true：JS对象  false：查询字符串
        //     // empty 设置是否获取空值
        //     //  如果为 true：获取空值  false： 不获取空值
        //     const data = serialize(form, { hash: true, empty: true})
        //     console.log(data);
        // })
    </script>
</body>

</html>